/**
 * 雷达图配置处理方法
 * @param {Array<Object>} data 传入相关数据
 * @returns {Object} 返回 Echarts Option 配置
 */
export const radarOptionHandler = (data = []) => {
  const radarValueData = data.map(item => item.value);

  return {
    tooltip: {
      formatter: () => createTooltip(data),
      backgroundColor: "rgba(3, 26, 47, 0.6)",
      textStyle: { color: "#fff", fontSize: 12 },
      confine: true,
      enterable: true
    },

    radar: {
      center: ["50%", "62 %"],
      radius: "65%",
      splitNumber: 5,
      name: {
        formatter: (name, indicator) => {
          const { rate, value } = indicator;
          return `{rate|${rate}%}  {value|${value}个}\n{name|${name}}`;
        },
        fontSize: 12,
        color: "rgba(255, 255, 255, 0.55)",
        rich: {
          name: { align: "center", lineHeight: 24 }
        }
      },
      nameGap: 10,
      indicator: data,
      splitArea: {
        areaStyle: { color: "rgba(119, 140, 162, 0.1)" }
      },
      splitLine: {
        show: true,
        lineStyle: { color: "rgba(255, 255, 255, 0.2)" }
      },
      axisLine: {
        show: true,
        lineStyle: { color: "rgba(255, 255, 255, 0.2)" }
      }
    },

    emphasis: { disabled: true },

    series: [
      {
        type: "radar",
        symbol: "circle",
        data: [
          {
            value: radarValueData,
            symbolSize: 6,
            itemStyle: {
              show: true,
              color: "rgba(135, 205, 255, 1)",
              borderColor: "rgba(135, 205, 255,0.2)",
              borderWidth: 8
            },
            lineStyle: {
              show: true,
              color: "rgba(255, 255, 255, .7)"
            },
            areaStyle: {
              color: {
                type: "linear",
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(11, 109, 218, 0.30)"
                  },
                  {
                    offset: 0.81,
                    color: "rgba(68, 170, 255, 0.80)"
                  },
                  {
                    offset: 1,
                    color: "rgba(100, 186, 255, 1)"
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  };
};

/**
 * 创建 Tooltip formatter 配置
 * @param {Array<Object>} data 图表数据
 * @returns {String} 返回 Tooltip formatter 配置
 */
const createTooltip = data => {
  const tipList = [];
  data.forEach(item => {
    const { name, value } = item;
    tipList.push(`${name}：${value}个`);
  });

  return tipList.join("<br/>");
};
